<template>
  <div class="editor-container">
    <!-- 主编辑区域 -->
    <div class="editor-main">
      <!-- 左侧组件列表 -->
      <div class="components-panel">
        <div class="panel-header">
          <h2>组件库</h2>
        </div>
        <div class="components-search">
          <input type="text" placeholder="搜索组件..." v-model="searchKeyword" />
        </div>
        <div class="components-content">
          <div class="components-tabs vertical-tabs">
            <div 
              class="tab-item" 
              v-for="tab in componentTabs" 
              :key="tab.id"
              :class="{ active: activeTab === tab.id }"
              @click="activeTab = tab.id"
            >
              {{ tab.name }}
            </div>
          </div>
          <div class="components-list custom-scroll scrollable-area" v-better-scroll>
            <div 
              class="component-item"
              v-for="item in filteredComponents"
              :key="item.id"
              draggable="true"
              @dragstart="dragStart($event, item)"
            >
              <div class="component-icon">
                <img :src="item.icon" :alt="item.name" />
              </div>
              <div class="component-name">{{ item.name }}</div>
            </div>
          </div>
        </div>
      </div>

      <!-- 中间预览区域 -->
      <div class="preview-area">
        <div class="phone-frame">
          <div class="phone-header">
            <div class="phone-status-bar"></div>
          </div>
          <div class="miniprogram-header">
            <div class="header-title">
              {{ pageTitle }}
            </div>
            <div class="capsule-button">
              <div class="capsule-item dots" @click="previewApp">
                <span></span>
                <span></span>
                <span></span>
              </div>
              <div class="capsule-divider"></div>
              <div class="capsule-item close" @click="previewApp"></div>
            </div>
          </div>
          <div 
            class="phone-content custom-scroll scrollable-area"
            v-better-scroll
            @dragover.prevent
            @drop="onDrop($event)"
          >
            <!-- 所有页面统一使用编辑界面 -->
            <div class="page-content-wrapper">
              <div v-if="editorElements.length === 0" class="empty-tip">
                <p>从左侧拖拽组件到此处</p>
              </div>
              <template v-else>
                <div 
                  v-for="(element, index) in editorElements" 
                  :key="element.id"
                  class="editor-element"
                  :class="{ 'element-selected': selectedElementIndex === index }"
                  @click.stop="selectElement(index)"
                  draggable="true"
                  @dragstart="elementDragStart($event, index)"
                  @dragover.prevent
                  @drop="elementDrop($event, index)"
                >
                  <component 
                    :is="element.component" 
                    v-bind="element.props"
                    class="element-component"
                    @tabComponentAdded="handleTabComponentAdded"
                    @tabComponentRemoved="handleTabComponentRemoved"
                    @tabComponentSelected="handleTabComponentSelected"
                    @tabComponentMoved="handleTabComponentMoved"
                  ></component>
                  <div class="element-actions" v-if="selectedElementIndex === index">
                    <button class="element-action delete" @click.stop="removeElement(index)" title="删除组件">
                      <i class="minus-icon">-</i>
                    </button>
                  </div>
                  <div class="drag-indicator" v-if="selectedElementIndex === index">
                    <i class="el-icon-rank"></i>
                  </div>
                </div>
              </template>
            </div>
          </div>
          <div class="miniprogram-tabbar">
            <div 
              v-for="(tab, index) in tabbarItems"
              :key="index"
              class="tabbar-item" 
              :class="{ active: activeTabItem === index }"
              @click="handleTabClick(index, tab.path)"
            >
              <i class="tabbar-icon" :class="'icon-' + tab.iconType"></i>
              <span class="tabbar-text">{{ tab.text }}</span>
            </div>
          </div>
        </div>
      </div>

      <!-- 右侧属性面板 -->
      <div class="properties-panel">
        <div class="panel-header">
          <h2>{{ selectedElementIndex !== null ? '组件属性' : '页面设置' }}</h2>
        </div>
        <div class="properties-content custom-scroll scrollable-area" v-better-scroll>
          <div v-if="selectedElementIndex === null" class="page-properties">
            <div class="property-group">
              <h3>页面设置</h3>
              <div class="property-item">
                <label>页面标题</label>
                <input type="text" v-model="pageTitle" />
              </div>
              <div class="property-item">
                <label>背景颜色</label>
                <input type="color" v-model="pageBackgroundColor" />
              </div>
            </div>
            
            <!-- 底部导航栏设置 -->
            <div class="property-group">
              <h3>底部导航栏</h3>
              <div v-for="(tab, index) in tabbarItems" :key="index" class="tabbar-config-item">
                <div class="tabbar-config-header">
                  <span>选项卡 {{ index + 1 }}</span>
                  <button v-if="tabbarItems.length > 2" @click="removeTabbarItem(index)" class="remove-btn">
                    <i class="minus-icon">-</i>
                  </button>
                </div>
                <div class="property-item">
                  <label>标签名称</label>
                  <input type="text" v-model="tab.text" />
                </div>
                <div class="property-item">
                  <label>页面路径</label>
                  <input type="text" v-model="tab.path" placeholder="/pages/index/index" />
                </div>
                <div class="property-item">
                  <label>图标类型</label>
                  <select v-model="tab.iconType">
                    <option value="home">首页</option>
                    <option value="shop">商城</option>
                    <option value="user">我的</option>
                    <option value="message">消息</option>
                    <option value="cart">购物车</option>
                    <option value="category">分类</option>
                  </select>
                </div>
              </div>
              
              <div class="tabbar-actions" v-if="tabbarItems.length < 5">
                <button @click="addTabbarItem" class="add-btn">
                  <i class="plus-icon">+</i> 添加选项卡
                </button>
              </div>
            </div>
          </div>
          <div v-else class="element-properties">
            <div class="property-group">
              <h3>基本信息</h3>
              <div class="property-item">
                <label>组件名称</label>
                <input type="text" v-model="selectedElement.name" readonly />
              </div>
            </div>
            <div class="property-group" v-if="selectedElement && selectedElement.props">
              <h3>组件属性</h3>
              <div 
                class="property-item" 
                v-for="(value, key) in selectedElement.props" 
                :key="key"
              >
                <template v-if="key === 'tabs' && selectedElement.component === 'editor-tabs'">
                  <h4>选项卡设置</h4>
                  <div v-for="(tab, tabIndex) in selectedElement.props.tabs" :key="tabIndex" class="tab-property-item">
                    <div class="tab-header">
                      <span>选项卡 {{ tabIndex + 1 }}</span>
                      <button v-if="selectedElement.props.tabs.length > 2" @click="removeTab(tabIndex)" class="remove-btn">
                        <i class="minus-icon">-</i>
                      </button>
                    </div>
                    <div class="property-item">
                      <label>标签名称</label>
                      <input type="text" v-model="tab.label" />
                    </div>
                  </div>
                  <div class="tab-actions" v-if="selectedElement.props.tabs.length < 5">
                    <button @click="addTab" class="add-btn">
                      <i class="plus-icon">+</i> 添加选项卡
                    </button>
                  </div>
                </template>
                <template v-else>
                  <label>{{ getPropertyLabel(key) }}</label>
                  <input 
                    v-if="getPropertyType(key) === 'text'" 
                    type="text" 
                    v-model="selectedElement.props[key]" 
                  />
                  <input 
                    v-else-if="getPropertyType(key) === 'color'" 
                    type="color" 
                    v-model="selectedElement.props[key]" 
                  />
                  <input 
                    v-else-if="getPropertyType(key) === 'number'" 
                    type="number" 
                    v-model.number="selectedElement.props[key]" 
                  />
                  <select 
                    v-else-if="getPropertyType(key) === 'select'" 
                    v-model="selectedElement.props[key]"
                  >
                    <option 
                      v-for="option in getPropertyOptions(key)" 
                      :key="option.value" 
                      :value="option.value"
                    >
                      {{ option.label }}
                    </option>
                  </select>
                  <input 
                    v-else 
                    type="text" 
                    v-model="selectedElement.props[key]" 
                  />
                </template>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted, onUnmounted } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { ElMessage } from 'element-plus';
import { componentsLibraryConfig, registerEditorComponents } from '@/components/editor';

// 注册所有编辑器组件
import {
  EditorText,
  EditorImage,
  EditorButton,
  EditorBanner,
  EditorProducts,
  EditorForm,
  EditorVideo,
  EditorNav,
  EditorCard,
  EditorTabs,
  EditorCountdown,
  EditorLocation,
  EditorContact,
  EditorDivider,
  EditorSlider
} from '@/components/editor';

// 路由参数
const route = useRoute();
const router = useRouter();

// 编辑器状态
const pageTitle = ref('我的小程序');
const pageBackgroundColor = ref('#ffffff');
const searchKeyword = ref('');
const activeTab = ref('basic');
const selectedElementIndex = ref<number | null>(null);
// 为每个页面创建独立的编辑元素数组
const pageElements = ref({
  home: [],
  shop: [],
  user: [],
  message: [],
  new: []
});
// 当前页面的编辑元素
const editorElements = computed(() => pageElements.value[currentPageContent.value] || []);
const activeTabItem = ref(0);
// 当前显示页面的内容
const currentPageContent = ref('home');

// 底部标签栏配置
const tabbarItems = ref([
  { text: '首页', path: '/pages/index/index', iconType: 'home', content: 'home' },
  { text: '购物', path: '/pages/shop/index', iconType: 'shop', content: 'shop' },
  { text: '我的', path: '/pages/user/index', iconType: 'user', content: 'user' },
  { text: '消息', path: '/pages/message/index', iconType: 'message', content: 'message' }
]);

// 添加标签栏项目
const addTabbarItem = () => {
  if (tabbarItems.value.length < 5) {
    tabbarItems.value.push({ text: '新选项卡', path: '/pages/new/index', iconType: 'category', content: 'new' });
  }
};

// 移除标签栏项目
const removeTabbarItem = (index) => {
  if (tabbarItems.value.length > 2) { // 保持至少2个选项卡
    tabbarItems.value.splice(index, 1);
    if (activeTabItem.value >= tabbarItems.value.length) {
      activeTabItem.value = tabbarItems.value.length - 1;
    }
  }
};

// 组件类型标签页
const componentTabs = [
  { id: 'basic', name: '基础组件' },
  { id: 'business', name: '业务组件' },
  { id: 'layout', name: '布局组件' },
  { id: 'form', name: '表单组件' },
  { id: 'media', name: '媒体组件' }
];

// 使用从组件库配置中导入的组件列表
const componentsLibrary = componentsLibraryConfig;

// 筛选组件
const filteredComponents = computed(() => {
  return componentsLibrary.filter(comp => {
    const matchesTab = activeTab.value === comp.category;
    const matchesSearch = searchKeyword.value === '' || 
      comp.name.toLowerCase().includes(searchKeyword.value.toLowerCase());
    return matchesTab && matchesSearch;
  });
});

// 获取当前选中的元素
const selectedElement = computed(() => {
  const currentPage = currentPageContent.value;
  if (selectedElementIndex.value !== null && pageElements.value[currentPage]) {
    return pageElements.value[currentPage][selectedElementIndex.value];
  }
  return null;
});

// 处理组件拖拽开始
const dragStart = (event, component) => {
  event.dataTransfer.setData('componentId', component.id);
  event.dataTransfer.setData('type', 'new');
};

// 处理元素拖拽开始
const elementDragStart = (event, index) => {
  event.dataTransfer.setData('elementIndex', index);
  event.dataTransfer.setData('type', 'reorder');
};

// 处理组件放置
const onDrop = (event) => {
  // 检查事件是否已被子组件处理过
  if (event.handled === true) {
    return; // 如果事件已被处理，则不再处理
  }

  const type = event.dataTransfer.getData('type');
  const currentPage = currentPageContent.value;
  
  if (type === 'new') {
    // 新组件添加
    const componentId = event.dataTransfer.getData('componentId');
    const component = componentsLibrary.find(c => c.id === componentId);
    
    if (component) {
      // 创建一个新的元素实例
      const newElement = {
        id: `${component.id}_${Date.now()}`,
        name: component.name,
        component: component.component,
        props: { ...component.defaultProps }
      };
      
      // 添加到当前页面的元素数组
      pageElements.value[currentPage].push(newElement);
      // 自动选中新添加的元素
      selectedElementIndex.value = pageElements.value[currentPage].length - 1;
    }
  } else if (type === 'reorder') {
    // 放置到页面末尾
    const fromIndex = parseInt(event.dataTransfer.getData('elementIndex'));
    if (!isNaN(fromIndex)) {
      moveElementToEnd(fromIndex);
    }
  }
};

// 处理元素放置（排序）
const elementDrop = (event, toIndex) => {
  const type = event.dataTransfer.getData('type');
  const currentPage = currentPageContent.value;
  
  if (type === 'reorder') {
    const fromIndex = parseInt(event.dataTransfer.getData('elementIndex'));
    if (!isNaN(fromIndex) && fromIndex !== toIndex) {
      moveElement(fromIndex, toIndex);
    }
  } else if (type === 'new') {
    // 新组件添加到特定位置
    const componentId = event.dataTransfer.getData('componentId');
    const component = componentsLibrary.find(c => c.id === componentId);
    
    if (component) {
      // 创建一个新的元素实例
      const newElement = {
        id: `${component.id}_${Date.now()}`,
        name: component.name,
        component: component.component,
        props: { ...component.defaultProps }
      };
      
      // 添加到当前页面的特定位置
      pageElements.value[currentPage].splice(toIndex, 0, newElement);
      // 自动选中新添加的元素
      selectedElementIndex.value = toIndex;
    }
  }
  
  event.stopPropagation();
};

// 移动元素（拖拽排序）
const moveElement = (fromIndex, toIndex) => {
  const currentPage = currentPageContent.value;
  const element = pageElements.value[currentPage].splice(fromIndex, 1)[0];
  pageElements.value[currentPage].splice(toIndex, 0, element);
  selectedElementIndex.value = toIndex;
};

// 移动元素到末尾
const moveElementToEnd = (fromIndex) => {
  const currentPage = currentPageContent.value;
  const element = pageElements.value[currentPage].splice(fromIndex, 1)[0];
  pageElements.value[currentPage].push(element);
  selectedElementIndex.value = pageElements.value[currentPage].length - 1;
};

// 选择元素
const selectElement = (index) => {
  selectedElementIndex.value = index;
};

// 删除元素
const removeElement = (index) => {
  const currentPage = currentPageContent.value;
  pageElements.value[currentPage].splice(index, 1);
  if (pageElements.value[currentPage].length === 0) {
    selectedElementIndex.value = null;
  } else if (index >= pageElements.value[currentPage].length) {
    selectedElementIndex.value = pageElements.value[currentPage].length - 1;
  }
};

// 获取属性标签
const getPropertyLabel = (key) => {
  const labels = {
    content: '内容',
    color: '颜色',
    fontSize: '字号',
    textAlign: '对齐',
    src: '图片地址',
    width: '宽度',
    height: '高度',
    borderRadius: '圆角',
    text: '文本',
    type: '类型',
    size: '尺寸',
    backgroundColor: '背景色',
    images: '图片列表',
    autoplay: '自动播放',
    columns: '列数',
    showPrice: '显示价格',
    showTitle: '显示标题'
  };
  
  return labels[key] || key;
};

// 获取属性类型
const getPropertyType = (key) => {
  const types = {
    color: 'color',
    backgroundColor: 'color',
    fontSize: 'number',
    borderRadius: 'number',
    height: 'number',
    columns: 'number',
    textAlign: 'select',
    type: 'select',
    size: 'select',
    styleType: 'select'
  };
  
  return types[key] || 'text';
};

// 获取选择器选项
const getPropertyOptions = (key) => {
  const options = {
    textAlign: [
      { value: 'left', label: '左对齐' },
      { value: 'center', label: '居中' },
      { value: 'right', label: '右对齐' }
    ],
    type: [
      { value: 'primary', label: '主要' },
      { value: 'success', label: '成功' },
      { value: 'warning', label: '警告' },
      { value: 'danger', label: '危险' },
      { value: 'info', label: '信息' }
    ],
    size: [
      { value: 'small', label: '小' },
      { value: 'medium', label: '中' },
      { value: 'large', label: '大' }
    ],
    styleType: [
      { value: '', label: '普通文本' },
      { value: 'title', label: '标题文本' },
      { value: 'hot-title', label: '热门标题' }
    ]
  };
  
  return options[key] || [];
};

// 预览应用
const previewApp = () => {
  ElMessage.success('预览功能即将上线');
};

// 保存模板
const saveTemplate = () => {
  ElMessage.success('模板保存成功');
};

// 发布应用
const publishApp = () => {
  ElMessage.success('应用发布成功');
};

// 初始化编辑器
onMounted(() => {
  // 从路由参数获取模板信息
  const templateType = route.query.template;
  const templateTitle = route.query.title;
  
  if (templateTitle) {
    pageTitle.value = templateTitle as string;
  }
  
  // TODO: 根据模板类型加载预设的组件
  console.log('模板类型:', templateType);
});

// 点击页面空白区域取消选中
const handleClickOutside = (event) => {
  const target = event.target as HTMLElement;
  if (!target.closest('.editor-element') && !target.closest('.properties-panel')) {
    selectedElementIndex.value = null;
  }
};

onMounted(() => {
  document.addEventListener('click', handleClickOutside);
});

onUnmounted(() => {
  document.removeEventListener('click', handleClickOutside);
});

// 添加点击跳转到路径的功能
const handleTabClick = (index, path) => {
  activeTabItem.value = index;
  // 实现跳转到路径的逻辑
  currentPageContent.value = tabbarItems.value[index].content;
  // 切换页面时清除元素选中状态
  selectedElementIndex.value = null;
  
  // 确保当前页面有元素数组
  const content = tabbarItems.value[index].content;
  if (!pageElements.value[content]) {
    pageElements.value[content] = [];
  }
  
  ElMessage.info(`跳转到页面: ${path}`);
  // 在实际小程序中会使用类似 wx.navigateTo({url: path}) 的API
};

// 处理选项卡内部组件添加
const handleTabComponentAdded = ({ tabIndex, componentId, position, elementIndex }) => {
  const currentPage = currentPageContent.value;
  // 查找选项卡组件
  const tabsElementIndex = selectedElementIndex.value;
  
  if (tabsElementIndex === null) {
    ElMessage.warning('请先选择一个选项卡组件');
    return;
  }
  
  // 获取选项卡组件
  const tabsElement = pageElements.value[currentPage][tabsElementIndex];
  
  // 确保选中的是选项卡组件
  if (tabsElement.component !== 'editor-tabs') {
    ElMessage.warning('所选组件不是选项卡组件');
    return;
  }
  
  // 查找要添加的组件
  const component = componentsLibrary.find(c => c.id === componentId);
  
  if (!component) {
    ElMessage.warning('未找到指定的组件');
    return;
  }
  
  // 创建一个新的元素实例
  const newElement = {
    id: `${component.id}_${Date.now()}`,
    name: component.name,
    component: component.component,
    props: { ...component.defaultProps }
  };
  
  // 确保选项卡的components数组已初始化
  const tabIndexNum = typeof tabIndex === 'string' ? parseInt(tabIndex) : tabIndex;
  if (!tabsElement.props.tabs[tabIndexNum].components) {
    tabsElement.props.tabs[tabIndexNum].components = [];
  }
  
  // 添加组件到选项卡
  if (position === 'end') {
    // 添加到末尾
    tabsElement.props.tabs[tabIndexNum].components.push(newElement);
  } else {
    // 添加到指定位置
    const elemIndexNum = typeof elementIndex === 'string' ? parseInt(elementIndex) : elementIndex;
    tabsElement.props.tabs[tabIndexNum].components.splice(elemIndexNum, 0, newElement);
  }
  
  ElMessage.success(`已添加组件 ${component.name} 到选项卡`);
};

// 处理选项卡内部组件移除
const handleTabComponentRemoved = ({ tabIndex, elementIndex }) => {
  const currentPage = currentPageContent.value;
  // 查找选项卡组件
  const tabsElementIndex = selectedElementIndex.value;
  
  if (tabsElementIndex === null) {
    ElMessage.warning('请先选择一个选项卡组件');
    return;
  }
  
  // 获取选项卡组件
  const tabsElement = pageElements.value[currentPage][tabsElementIndex];
  
  // 确保选中的是选项卡组件
  if (tabsElement.component !== 'editor-tabs') {
    ElMessage.warning('所选组件不是选项卡组件');
    return;
  }
  
  // 确保选项卡的components数组存在
  const tabIndexNum = typeof tabIndex === 'string' ? parseInt(tabIndex) : tabIndex;
  if (!tabsElement.props.tabs[tabIndexNum].components) {
    return;
  }
  
  // 从选项卡中移除组件
  const elemIndexNum = typeof elementIndex === 'string' ? parseInt(elementIndex) : elementIndex;
  const removedElement = tabsElement.props.tabs[tabIndexNum].components.splice(elemIndexNum, 1)[0];
  
  if (removedElement) {
    ElMessage.success(`已从选项卡移除组件 ${removedElement.name}`);
  }
};

// 处理选项卡内部组件选择
const handleTabComponentSelected = ({ tabIndex, elementIndex }) => {
  // 这里可以实现选择组件后的逻辑，如显示属性面板
  // 不需要实际改变selectedElementIndex，因为我们仍然是在编辑选项卡组件
  // 可以在这里保存当前选中的选项卡内部组件的引用，以便在属性面板中显示和编辑其属性
  const currentPage = currentPageContent.value;
  const tabsElementIndex = selectedElementIndex.value;
  
  if (tabsElementIndex === null) {
    return;
  }
  
  const tabsElement = pageElements.value[currentPage][tabsElementIndex];
  
  if (tabsElement.component !== 'editor-tabs') {
    return;
  }
  
  // 可以在这里实现显示和编辑选项卡内部组件属性的逻辑
  ElMessage.info(`已选择选项卡 ${tabIndex + 1} 中的组件 ${elementIndex + 1}`);
};

// 处理选项卡内部组件移动
const handleTabComponentMoved = ({ fromTabIndex, fromElementIndex, toTabIndex, toElementIndex }) => {
  const currentPage = currentPageContent.value;
  // 查找选项卡组件
  const tabsElementIndex = selectedElementIndex.value;
  
  if (tabsElementIndex === null) {
    ElMessage.warning('请先选择一个选项卡组件');
    return;
  }
  
  // 获取选项卡组件
  const tabsElement = pageElements.value[currentPage][tabsElementIndex];
  
  // 确保选中的是选项卡组件
  if (tabsElement.component !== 'editor-tabs') {
    ElMessage.warning('所选组件不是选项卡组件');
    return;
  }
  
  // 确保源选项卡和目标选项卡的components数组已初始化
  const fromTabIndexNum = typeof fromTabIndex === 'string' ? parseInt(fromTabIndex) : fromTabIndex;
  const toTabIndexNum = typeof toTabIndex === 'string' ? parseInt(toTabIndex) : toTabIndex;
  
  if (!tabsElement.props.tabs[fromTabIndexNum].components) {
    tabsElement.props.tabs[fromTabIndexNum].components = [];
  }
  
  if (!tabsElement.props.tabs[toTabIndexNum].components) {
    tabsElement.props.tabs[toTabIndexNum].components = [];
  }
  
  // 从源选项卡中移除组件
  const fromElementIndexNum = typeof fromElementIndex === 'string' ? parseInt(fromElementIndex) : fromElementIndex;
  const element = tabsElement.props.tabs[fromTabIndexNum].components.splice(fromElementIndexNum, 1)[0];
  
  if (!element) {
    return;
  }
  
  // 添加到目标选项卡
  const toElementIndexNum = typeof toElementIndex === 'string' ? parseInt(toElementIndex) : toElementIndex;
  tabsElement.props.tabs[toTabIndexNum].components.splice(toElementIndexNum, 0, element);
  
  ElMessage.success('组件已移动');
};

// 添加选项卡
const addTab = () => {
  const currentPage = currentPageContent.value;
  const element = pageElements.value[currentPage][selectedElementIndex.value];
  
  if (element.component !== 'editor-tabs') {
    return;
  }
  
  if (element.props.tabs.length < 5) {
    element.props.tabs.push({
      label: `选项${element.props.tabs.length + 1}`,
      content: `选项${element.props.tabs.length + 1}内容`,
      components: []
    });
    
    ElMessage.success('已添加新选项卡');
  }
};

// 移除选项卡
const removeTab = (tabIndex) => {
  const currentPage = currentPageContent.value;
  const element = pageElements.value[currentPage][selectedElementIndex.value];
  
  if (element.component !== 'editor-tabs') {
    return;
  }
  
  if (element.props.tabs.length > 2) {
    const tabIndexNum = typeof tabIndex === 'string' ? parseInt(tabIndex) : tabIndex;
    element.props.tabs.splice(tabIndexNum, 1);
    ElMessage.success('已移除选项卡');
  }
};
</script>

<style lang="scss" scoped>
.editor-container {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 48px); /* 减去导航栏高度 */
  background-color: #f8f9fb;
  color: #333;
  margin-top: 48px; /* 与导航栏高度一致 */
  position: relative;
  z-index: 1; /* 确保层级正确 */
  
  .editor-main {
    display: flex;
    flex: 1;
    overflow: hidden;
    
    .components-panel {
      width: 280px;
      background-color: #fff;
      border-right: 1px solid #eaeaea;
      display: flex;
      flex-direction: column;
      box-shadow: 2px 0 8px rgba(0, 0, 0, 0.03);
      transition: width 0.3s ease;
      
      .panel-header {
        padding: 16px 20px;
        border-bottom: 1px solid #f0f0f0;
        display: flex;
        align-items: center;
        justify-content: space-between;
        
        h2 {
          font-size: 17px;
          margin: 0;
          color: #333;
          font-weight: 600;
        }
      }
      
      .components-search {
        padding: 14px 20px;
        border-bottom: 1px solid #f0f0f0;
        
        input {
          width: 100%;
          padding: 10px 14px;
          border: 1px solid #e8e8e8;
          border-radius: 6px;
          font-size: 14px;
          background-color: #f9f9f9;
          transition: all 0.3s ease;
          
          &::placeholder {
            color: #aaa;
          }
          
          &:focus {
            outline: none;
            border-color: #8B4513;
            background-color: #fff;
            box-shadow: 0 0 0 2px rgba(139, 69, 19, 0.1);
          }
        }
      }
      
      .components-content {
        display: flex;
        flex: 1;
        overflow: hidden;
        
        .components-tabs {
          width: 100px;
          background-color: #fafafa;
          border-right: 1px solid #f0f0f0;
          padding: 15px 0;
          
          &.vertical-tabs {
            .tab-item {
              padding: 12px 8px;
              text-align: center;
              font-size: 14px;
              color: #666;
              cursor: pointer;
              transition: all 0.3s ease;
              margin-bottom: 5px;
              position: relative;
              
              &::before {
                content: '';
                position: absolute;
                left: 0;
                top: 0;
                height: 100%;
                width: 3px;
                background-color: transparent;
                transition: all 0.3s ease;
              }
              
              &:hover {
                color: #8B4513;
                background-color: rgba(139, 69, 19, 0.05);
              }
              
              &.active {
                color: #8B4513;
                font-weight: 500;
                background-color: rgba(139, 69, 19, 0.08);
                
                &::before {
                  background-color: #8B4513;
                }
              }
            }
          }
        }
        
                  .components-list {
          flex: 1;
          padding: 15px;
          overflow-y: auto;
          display: grid;
          grid-template-columns: repeat(2, 1fr);
          grid-auto-rows: 100px; /* 固定行高 */
          gap: 12px;
          
          &::-webkit-scrollbar {
            width: 3px; /* 减少滚动条宽度 */
          }
          
          &::-webkit-scrollbar-track {
            background: transparent;
          }
          
          &::-webkit-scrollbar-thumb {
            background: rgba(0, 0, 0, 0.1); /* 降低滚动条颜色透明度 */
            border-radius: 3px;
          }
          
          &::-webkit-scrollbar-thumb:hover {
            background: rgba(0, 0, 0, 0.2); /* 悬停时稍微加深 */
          }
          
          .component-item {
            padding: 10px;
            background-color: #fff;
            border: 1px solid #eaeaea;
            border-radius: 8px;
            display: flex;
            flex-direction: column;
            align-items: center;
            cursor: grab;
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
            height: 100px; /* 固定高度，确保所有组件按钮一致 */
            
            &::before {
              content: '';
              position: absolute;
              top: -2px;
              left: -2px;
              right: -2px;
              bottom: -2px;
              background: linear-gradient(45deg, #8B4513, #D2B48C);
              z-index: -1;
              opacity: 0;
              transition: opacity 0.3s ease;
              border-radius: 10px;
            }
            
            &:hover {
              transform: translateY(-3px);
              box-shadow: 0 6px 12px rgba(0, 0, 0, 0.08);
              border-color: rgba(139, 69, 19, 0.3);
              
              &::before {
                opacity: 1;
              }
              
              .component-icon img {
                transform: scale(1.1);
              }
            }
            
            &:active {
              cursor: grabbing;
              transform: translateY(0);
              box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
            }
            
            .component-icon {
              padding: 8px;
              margin-bottom: 8px;
              height: 45px;
              width: 45px; /* 固定宽度 */
              display: flex;
              align-items: center;
              justify-content: center;
              
              img {
                width: 36px;
                height: 36px;
                object-fit: contain;
                transition: transform 0.3s ease;
                max-width: 100%; /* 确保图片不会超出容器 */
                max-height: 100%; /* 确保图片不会超出容器 */
              }
            }
            
            .component-name {
              font-size: 13px;
              color: #333;
              text-align: center;
              font-weight: 500;
              max-width: 100%; /* 确保文字不会超出容器 */
              white-space: nowrap; /* 防止文字换行 */
              overflow: hidden; /* 隐藏溢出部分 */
              text-overflow: ellipsis; /* 显示省略号 */
            }
          }
        }
      }
    }
    
          .preview-area {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 35px 0; /* 增加上下内边距 */
      background-color: #f0f2f5;
      background-image: linear-gradient(45deg, #f8f8f8 25%, transparent 25%, transparent 75%, #f8f8f8 75%, #f8f8f8), 
                        linear-gradient(45deg, #f8f8f8 25%, transparent 25%, transparent 75%, #f8f8f8 75%, #f8f8f8);
      background-size: 20px 20px;
      background-position: 0 0, 10px 10px;
      position: relative;
      overflow: auto;
      
      .phone-frame {
        width: 360px; /* 增加宽度，更符合现代手机尺寸 */
        height: 750px; /* 固定高度，适配多数手机屏幕内容 */
        min-height: 750px; /* 设置最小高度 */
        max-height: 750px; /* 设置最大高度限制 */
        background-color: #fff;
        border-radius: 30px;
        overflow: hidden;
        box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(0, 0, 0, 0.08);
        position: relative;
        transition: all 0.3s ease;
        transform-origin: top center;
        margin: 20px auto;
        
        &:hover {
          box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(0, 0, 0, 0.1);
        }
        
        .phone-header {
          background-color: #000;
          height: 40px;
          position: relative;
          width: 100%; /* 确保宽度占满 */
          border-top-left-radius: 30px; /* 与手机框架圆角一致 */
          border-top-right-radius: 30px; /* 与手机框架圆角一致 */
          
          .phone-status-bar {
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 0 15px;
            
            &::before {
              content: '';
              width: 80px;
              height: 20px;
              background-color: #000;
              border-radius: 0 0 12px 12px;
              position: absolute;
              top: 0;
              left: 50%;
              transform: translateX(-50%);
            }
            
            &::after {
              content: '';
              width: 6px;
              height: 6px;
              background-color: #333;
              border-radius: 50%;
              position: absolute;
              top: 15px;
              right: 20px;
            }
          }
        }
        
        .miniprogram-header {
          height: 44px;
          background-color: #fff;
          display: flex;
          align-items: center;
          justify-content: center;
          position: relative;
          border-bottom: 1px solid rgba(0, 0, 0, 0.05);
          padding: 0 15px;
          width: 100%; /* 确保宽度占满 */
          
          .header-title {
            font-size: 16px;
            font-weight: 500;
            color: #000;
            max-width: 60%;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            text-align: center;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
          }
          
          .capsule-button {
            position: absolute;
            right: 15px;
            top: 50%;
            transform: translateY(-50%);
            display: flex;
            align-items: center;
            height: 28px;
            background-color: #e0e0e0;
            border-radius: 16px;
            padding: 0 5px;
            box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05);
            
            .capsule-item {
              display: flex;
              align-items: center;
              justify-content: center;
              height: 100%;
              width: 28px;
              cursor: pointer;
              position: relative;
              
              &.dots {
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                
                span {
                  width: 3px;
                  height: 3px;
                  background-color: #666666;
                  border-radius: 50%;
                  margin: 1px 0;
                }
              }
              
              &.close {
                position: relative;
                
                &::before {
                  content: '';
                  position: absolute;
                  width: 12px;
                  height: 12px;
                  border: 1.5px solid #666666;
                  border-radius: 50%;
                  top: 50%;
                  left: 50%;
                  transform: translate(-50%, -50%);
                }
              }
            }
            
            .capsule-divider {
              width: 1px;
              height: 18px;
              background-color: rgba(102, 102, 102, 0.3);
              margin: 0 2px;
            }
          }
        }
        
                  .phone-content {
            min-height: calc(100% - 134px); /* 40px phone header + 44px miniprogram header + 50px tabbar */
            height: 600px; /* 固定内容区域高度，确保足够显示内容 */
            max-height: none; /* 移除最大高度限制 */
            overflow-y: auto;
            background-color: v-bind('pageBackgroundColor');
            padding: 6px 14px 12px 12px; /* 减少顶部内边距，保持右侧内边距 */
            position: relative;
            border: 1px solid rgba(0, 0, 0, 0.05); /* 添加轻微边框 */
            width: calc(100% - 2px); /* 确保宽度计算正确 */
            /* 由于使用全局滚动条样式，移除局部滚动条样式定义 */
          
          .empty-tip {
            height: 100%;
            min-height: 400px; /* 确保空状态时有足够高度 */
            display: flex;
            justify-content: center;
            align-items: center;
            color: #aaa;
            font-size: 14px;
            width: 100%; /* 确保宽度占满 */
            
            p {
              padding: 20px;
              border: 2px dashed #ddd;
              border-radius: 8px;
              background-color: rgba(0, 0, 0, 0.02);
              width: 70%; /* 控制提示框宽度 */
              text-align: center; /* 文字居中 */
            }
          }
          
          .editor-element {
            position: relative;
            margin-bottom: 10px; /* 减少元素间的底部间距 */
            margin-top: 10px; /* 减少元素顶部间距 */
            transition: all 0.3s ease;
            border: 2px solid transparent;
            border-radius: 8px; /* 增加圆角 */
            width: 100%; /* 确保宽度占满 */
            
            &:first-child {
              margin-top: 2px; /* 第一个元素几乎没有顶部间距 */
            }
            
            &:hover {
              box-shadow: 0 0 0 1px rgba(139, 69, 19, 0.2);
            }
            
            &.element-selected {
              border-color: #8B4513;
            }
            
            .element-component {
              width: 100%;
              min-height: 30px;
            }
            
            .element-actions {
              position: absolute;
              top: -15px;
              right: 10px; /* 调整右侧位置，避免被边缘遮挡 */
              display: flex;
              gap: 5px;
              z-index: 100; /* 提高层级确保按钮始终在最上层 */
              
              .element-action {
                width: 28px; /* 增加按钮尺寸 */
                height: 28px; /* 增加按钮尺寸 */
                border-radius: 50%;
                border: none;
                display: flex;
                justify-content: center;
                align-items: center;
                cursor: pointer;
                color: #fff;
                transition: all 0.3s ease;
                box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
                
                &.delete {
                  background-color: #ff4d4f;
                  
                  &:hover {
                    background-color: #ff7875;
                    transform: scale(1.15);
                  }
                  
                  &:active {
                    background-color: #cf1322;
                    transform: scale(1);
                  }
                }
                
                .minus-icon {
                  font-size: 20px; /* 增加图标尺寸 */
                  line-height: 1;
                  font-weight: bold;
                }
              }
            }
            
            .drag-indicator {
              position: absolute;
              top: calc(50% - 12px);
              left: -15px;
              width: 24px;
              height: 24px;
              border-radius: 50%;
              background-color: rgba(139, 69, 19, 0.8);
              color: #fff;
              display: flex;
              justify-content: center;
              align-items: center;
              cursor: move;
              box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
              opacity: 0.7;
              transition: opacity 0.3s ease;
              
              &:hover {
                opacity: 1;
              }
            }
          }
        }
        
        .miniprogram-tabbar {
          height: 50px;
          display: flex;
          background-color: #fff;
          border-top: 1px solid rgba(0, 0, 0, 0.1);
          position: absolute;
          bottom: 0;
          width: 100%;
          flex-wrap: nowrap;
          
          .tabbar-item {
            flex: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            font-size: 12px;
            color: #8a8a8a;
            cursor: pointer;
            transition: all 0.2s ease;
            
            &:hover {
              color: rgba(7, 193, 96, 0.8);
            }
            
            &.active {
              color: #07c160;
            }
            
            .tabbar-icon {
              width: 24px;
              height: 24px;
              margin-bottom: 3px;
              position: relative;
              
              &::before {
                content: '';
                display: block;
                width: 22px;
                height: 22px;
                background-color: currentColor;
                mask-size: cover;
                -webkit-mask-size: cover;
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                opacity: 0.8;
              }
              
              &.icon-home::before {
                mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z'/%3E%3C/svg%3E");
                -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z'/%3E%3C/svg%3E");
              }
              
              &.icon-shop::before {
                mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M20.016 2.016q0.797 0 1.383 0.586t0.586 1.383v16.031q0 0.797-0.586 1.383t-1.383 0.586h-16.031q-0.797 0-1.383-0.586t-0.586-1.383v-16.031q0-0.797 0.586-1.383t1.383-0.586h16.031zM6.984 17.016v-2.016h-1.969v2.016h1.969zM6.984 13.031v-2.016h-1.969v2.016h1.969zM6.984 9v-1.969h-1.969v1.969h1.969zM18.984 17.016v-10.031h-9.984v10.031h9.984z'%3E%3C/path%3E%3C/svg%3E");
                -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M20.016 2.016q0.797 0 1.383 0.586t0.586 1.383v16.031q0 0.797-0.586 1.383t-1.383 0.586h-16.031q-0.797 0-1.383-0.586t-0.586-1.383v-16.031q0-0.797 0.586-1.383t1.383-0.586h16.031zM6.984 17.016v-2.016h-1.969v2.016h1.969zM6.984 13.031v-2.016h-1.969v2.016h1.969zM6.984 9v-1.969h-1.969v1.969h1.969zM18.984 17.016v-10.031h-9.984v10.031h9.984z'%3E%3C/path%3E%3C/svg%3E");
              }
              
              &.icon-user::before {
                mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M12 12q1.641 0 2.813-1.172t1.172-2.813-1.172-2.836-2.813-1.195-2.813 1.195-1.172 2.836 1.172 2.813 2.813 1.172zM12 20.016q3.469 0 6.516-1.734t4.734-4.148q-1.313-1.969-3.984-3.563t-7.266-1.594q-4.594 0-7.266 1.594t-3.984 3.563q1.688 2.438 4.734 4.172t6.516 1.711z'%3E%3C/path%3E%3C/svg%3E");
                -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M12 12q1.641 0 2.813-1.172t1.172-2.813-1.172-2.836-2.813-1.195-2.813 1.195-1.172 2.836 1.172 2.813 2.813 1.172zM12 20.016q3.469 0 6.516-1.734t4.734-4.148q-1.313-1.969-3.984-3.563t-7.266-1.594q-4.594 0-7.266 1.594t-3.984 3.563q1.688 2.438 4.734 4.172t6.516 1.711z'%3E%3C/path%3E%3C/svg%3E");
              }
              
              &.icon-message::before {
                mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M20 2H4c-1.1 0-1.99.9-1.99 2L2 22l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-2 12H6v-2h12v2zm0-3H6V9h12v2zm0-3H6V6h12v2z'/%3E%3C/svg%3E");
                -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M20 2H4c-1.1 0-1.99.9-1.99 2L2 22l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-2 12H6v-2h12v2zm0-3H6V9h12v2zm0-3H6V6h12v2z'/%3E%3C/svg%3E");
              }
              
              &.icon-cart::before {
                mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M7 18c-1.1 0-1.99.9-1.99 2S5.9 22 7 22s2-.9 2-2-.9-2-2-2zM1 2v2h2l3.6 7.59-1.35 2.45c-.16.28-.25.61-.25.96 0 1.1.9 2 2 2h12v-2H7.42c-.14 0-.25-.11-.25-.25l.03-.12.9-1.63h7.45c.75 0 1.41-.41 1.75-1.03l3.58-6.49c.08-.14.12-.31.12-.48 0-.55-.45-1-1-1H5.21l-.94-2H1zm16 16c-1.1 0-1.99.9-1.99 2s.89 2 1.99 2 2-.9 2-2-.9-2-2-2z'/%3E%3C/svg%3E");
                -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M7 18c-1.1 0-1.99.9-1.99 2S5.9 22 7 22s2-.9 2-2-.9-2-2-2zM1 2v2h2l3.6 7.59-1.35 2.45c-.16.28-.25.61-.25.96 0 1.1.9 2 2 2h12v-2H7.42c-.14 0-.25-.11-.25-.25l.03-.12.9-1.63h7.45c.75 0 1.41-.41 1.75-1.03l3.58-6.49c.08-.14.12-.31.12-.48 0-.55-.45-1-1-1H5.21l-.94-2H1zm16 16c-1.1 0-1.99.9-1.99 2s.89 2 1.99 2 2-.9 2-2-.9-2-2-2z'/%3E%3C/svg%3E");
              }
              
              &.icon-category::before {
                mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M4 8h4V4H4v4zm6 12h4v-4h-4v4zm-6 0h4v-4H4v4zm0-6h4v-4H4v4zm6 0h4v-4h-4v4zm6-10v4h4V4h-4zm-6 4h4V4h-4v4zm6 6h4v-4h-4v4zm0 6h4v-4h-4v4z'/%3E%3C/svg%3E");
                -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M4 8h4V4H4v4zm6 12h4v-4h-4v4zm-6 0h4v-4H4v4zm0-6h4v-4H4v4zm6 0h4v-4h-4v4zm6-10v4h4V4h-4zm-6 4h4V4h-4v4zm6 6h4v-4h-4v4zm0 6h4v-4h-4v4z'/%3E%3C/svg%3E");
              }
            }
            
            .tabbar-text {
              margin-top: 2px;
              font-size: 12px;
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
              max-width: 100%;
            }
            
            &:active {
              opacity: 0.8;
            }
          }
        }
      }
    }
    
    .properties-panel {
      width: 300px;
      background-color: #fff;
      border-left: 1px solid #eaeaea;
      display: flex;
      flex-direction: column;
      box-shadow: -2px 0 8px rgba(0, 0, 0, 0.03);
      
      .panel-header {
        padding: 16px 20px;
        border-bottom: 1px solid #f0f0f0;
        
        h2 {
          font-size: 17px;
          margin: 0;
          font-weight: 600;
          color: #333;
        }
      }
      
      .properties-content {
        flex: 1;
        overflow-y: auto;
        padding: 15px;
        
        &::-webkit-scrollbar {
          width: 3px; /* 减少滚动条宽度 */
        }
        
        &::-webkit-scrollbar-track {
          background: transparent;
        }
        
        &::-webkit-scrollbar-thumb {
          background: rgba(0, 0, 0, 0.1); /* 降低滚动条颜色透明度 */
          border-radius: 3px;
        }
        
        &::-webkit-scrollbar-thumb:hover {
          background: rgba(0, 0, 0, 0.2); /* 悬停时稍微加深 */
        }
        
        .page-properties,
        .element-properties {
          .property-group {
            background-color: #fafafa;
            border-radius: 10px;
            padding: 15px;
            margin-bottom: 20px;
            border: 1px solid #f0f0f0;
            transition: all 0.3s ease;
            
            &:hover {
              box-shadow: 0 5px 10px rgba(0, 0, 0, 0.04);
              background-color: #fcfcfc;
            }
            
            h3 {
              font-size: 15px;
              margin-top: 0;
              margin-bottom: 15px;
              color: #555;
              font-weight: 600;
              position: relative;
              padding-bottom: 8px;
              
              &::after {
                content: '';
                position: absolute;
                left: 0;
                bottom: 0;
                width: 40px;
                height: 2px;
                background: linear-gradient(to right, #8B4513, rgba(139, 69, 19, 0.5));
              }
            }
            
            .property-item {
              margin-bottom: 12px;
              
              &:last-child {
                margin-bottom: 0;
              }
              
              label {
                display: block;
                font-size: 14px;
                color: #666;
                margin-bottom: 6px;
              }
              
              input, select {
                width: 100%;
                padding: 8px 12px;
                border: 1px solid #e0e0e0;
                border-radius: 6px;
                font-size: 14px;
                transition: all 0.3s ease;
                
                &:focus {
                  outline: none;
                  border-color: #8B4513;
                  box-shadow: 0 0 0 2px rgba(139, 69, 19, 0.1);
                }
              }
              
              input[type="color"] {
                height: 36px;
                padding: 2px;
              }
            }
          }
        }
      }
    }
  }
}

// 标签栏配置项样式
.tabbar-config-item {
  background-color: #f9f9f9;
  border-radius: 8px;
  padding: 15px;
  margin-bottom: 15px;
  border: 1px solid #eee;
  transition: all 0.3s ease;
  
  &:hover {
    background-color: #f5f5f5;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  }
  
  .tabbar-config-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: 1px dashed #eee;
    
    span {
      font-weight: 500;
      color: #333;
    }
    
    .remove-btn {
      width: 24px;
      height: 24px;
      border-radius: 50%;
      background-color: #ff4d4f;
      color: white;
      border: none;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.3s ease;
      
      &:hover {
        background-color: #ff7875;
        transform: scale(1.1);
      }
      
      .minus-icon {
        font-size: 16px;
        font-weight: bold;
      }
    }
  }
}

.tabbar-actions {
  margin-top: 20px;
  
  .add-btn {
    background-color: #8B4513;
    color: white;
    border: none;
    padding: 8px 15px;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    
    &:hover {
      background-color: #9a5423;
      transform: translateY(-2px);
    }
    
    .plus-icon {
      margin-right: 5px;
      font-weight: bold;
    }
  }
}

/* 页面内容样式 */
.page-content-wrapper {
  width: 100%;
  height: 100%;
  overflow-y: auto;
  padding: 10px; /* 添加内边距，确保有足够空间显示移除按钮 */
  padding-right: 20px; /* 右侧增加额外空间 */
}

.demo-page-content {
  padding: 15px;
  
  h3 {
    margin-top: 0;
    margin-bottom: 15px;
    font-size: 18px;
    color: #333;
  }
  
  p {
    margin-bottom: 15px;
    color: #666;
  }
}

/* 商品列表样式 */
.demo-product-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  
  .demo-product-item {
    background: #fff;
    border-radius: 8px;
    padding: 10px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.05);
    
    .demo-product-image {
      width: 100%;
      height: 100px;
      background: #f0f0f0;
      border-radius: 6px;
      margin-bottom: 8px;
    }
    
    .demo-product-title {
      font-size: 14px;
      margin-bottom: 5px;
      color: #333;
    }
    
    .demo-product-price {
      color: #ff6b6b;
      font-weight: bold;
    }
  }
}

/* 用户页面样式 */
.demo-user-profile {
  display: flex;
  align-items: center;
  padding: 15px;
  background: linear-gradient(135deg, #8B4513, #D2B48C);
  border-radius: 10px;
  margin-bottom: 20px;
  
  .demo-avatar {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: #fff;
    margin-right: 15px;
  }
  
  .demo-user-info {
    color: #fff;
    
    .demo-user-name {
      font-size: 18px;
      font-weight: bold;
      margin-bottom: 5px;
    }
    
    .demo-user-level {
      font-size: 14px;
      opacity: 0.8;
    }
  }
}

/* 选项卡属性编辑样式 */
.tab-property-item {
  background-color: #f9f9f9;
  border-radius: 8px;
  padding: 15px;
  margin-bottom: 15px;
  border: 1px solid #eee;
  transition: all 0.3s ease;
  
  &:hover {
    background-color: #f5f5f5;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  }
  
  .tab-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: 1px dashed #eee;
    
    span {
      font-weight: 500;
      color: #333;
    }
    
    .remove-btn {
      width: 24px;
      height: 24px;
      border-radius: 50%;
      background-color: #ff4d4f;
      color: white;
      border: none;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.3s ease;
      
      &:hover {
        background-color: #ff7875;
        transform: scale(1.1);
      }
      
      .minus-icon {
        font-size: 16px;
        font-weight: bold;
      }
    }
  }
}

.tab-actions {
  margin-top: 20px;
  
  .add-btn {
    background-color: #8B4513;
    color: white;
    border: none;
    padding: 8px 15px;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    
    &:hover {
      background-color: #9a5423;
      transform: translateY(-2px);
    }
    
    .plus-icon {
      margin-right: 5px;
      font-weight: bold;
    }
  }
}

.demo-menu-list {
  background: #fff;
  border-radius: 10px;
  overflow: hidden;
  
  .demo-menu-item {
    padding: 15px;
    border-bottom: 1px solid #f0f0f0;
    color: #333;
    position: relative;
    
    &:last-child {
      border-bottom: none;
    }
    
    .demo-menu-arrow {
      position: absolute;
      right: 15px;
      color: #ccc;
    }
  }
}

/* 消息页面样式 */
.demo-message-list {
  .demo-message-item {
    background: #fff;
    padding: 15px;
    border-radius: 8px;
    margin-bottom: 10px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.05);
    
    .demo-message-title {
      font-weight: bold;
      margin-bottom: 5px;
      color: #333;
    }
    
    .demo-message-time {
      font-size: 12px;
      color: #999;
      margin-bottom: 8px;
    }
    
    .demo-message-content {
      color: #666;
      font-size: 14px;
    }
  }
}
</style> 